<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
        div(class="flex-column")
            div(class="flex-column-item flex-center-center h3 under-line") 大剂量菜单
            div(class="flex-column-item" v-for="menu in currentPageMenus")
                div(:class="{'selected-text': menu.id == activeId ? true: false}",class="flex-row h3")
                    div(class="flex-row-item center") {{menu.name}}:
                    div(class="flex-row-item right") {{menu.value.value}}U

        control-amount(v-model="active",:visible="visible",ref="amountControl")

</template>

<script>

    export default {
        data() {
            return {
                menus: [
                    {
                        name: "早餐剂量",
                        id: 0,
                        value: {name: window.dose.preset.breakfast, value: window.dose.preset.breakfast},
                        min: 0,
                        max: 20,
                        increment: 0.1,
                        unit: "U",
                        onChange(model) {
                            window.dose.preset.breakfast = model.value.value;
                        }
                    },
                    {
                        name: "午餐剂量",
                        id: 1,
                        value: {name: window.dose.preset.lunch, value: window.dose.preset.lunch},
                        min: 0,
                        max: 20,
                        increment: 0.1,
                        unit: "U",
                        onChange(model) {
                            window.dose.preset.lunch = model.value.value;
                        }
                    },
                    {
                        name: "晚餐剂量",
                        id: 2,
                        value: {name: window.dose.preset.dinner, value: window.dose.preset.dinner},
                        min: 0,
                        max: 20,
                        increment: 0.1,
                        unit: "U",
                        onChange(model) {
                            window.dose.preset.dinner = model.value.value;
                        }
                    }
                ],
                activeId: 0,
                active: null,
                page: {maxResultCount: 3, skipCount: 0},
                visible: false
            };
        },
        computed: {
            currentPageMenus() {
                const start = this.page.skipCount;
                const end = this.page.skipCount + this.page.maxResultCount;
                return this.menus.slice(start, end);
            }
        },
        methods: {
            getActive(id) {
                return this.menus.find(menu => {
                    return menu.id == id;
                });
            },
            up() {
                if (this.visible) {
                    this.$refs.amountControl.up();
                } else {
                    if (this.activeId == 3) {
                        this.page.skipCount = 0;
                    }

                    if (this.activeId == 0) {
                        this.activeId = this.menus[this.menus.length - 1].id;
                    } else {
                        this.activeId = this.activeId - 1;
                    }

                    this.active = this.getActive(this.activeId);
                }
            },
            down() {
                if (this.visible) {
                    this.$refs.amountControl.down();
                } else {
                    if (this.activeId == 2) {
                    } else if (this.activeId == 5) {
                        this.page.skipCount = 0;
                    }

                    if (this.activeId == this.menus[this.menus.length - 1].id) {
                        this.activeId = 0;
                    } else {
                        this.activeId = this.activeId + 1;
                    }
                    this.active = this.getActive(this.activeId);
                }
            },

            back() {
                if (!this.visible) {
                    this.$router.push("/large-dose/menu");
                    return;
                }

                this.visible = false;
                presetHandler.updatePresets();
            },
            yes() {
                // if(this.visible){
                //     presetHandler.updatePresets();
                // }
                this.visible = !this.visible;

            }
        },
        created() {
            this.active = this.menus[0];
        }
    };
</script>

<style lang="less">
</style>
